<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表页</title>
		<link rel="shortcut icon" href="favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
		<link rel="stylesheet" type="text/css" href="css/header_jsstyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
		<script type="text/javascript" src="js/cookie.js" ></script>
		<script type="text/javascript" src="js/extend.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/js.js" ></script>
	</head>
	<body>
		<div id="header"></div>
		<div id="window_right"></div>
		<script>
		header();
			$(function(){
				$("#header").on("mouseover",".header_nav .all_shop ",function(){
					$(this).find(".two_list").show()
				})
				$("#header").on("mouseout",".header_nav .all_shop",function(){
					$(this).find(".two_list").hide()
				})
			})
			window_r();
		</script>
		<div id="content">
			<div class="w">
				<p class="now_list">
					<a href="index.html">首页</a> >
					商品搜索_
					<span class="now_list_zi">
					</span>
				</p>
				<div class="content_list">
					<div class="content_list_left l">
						<div class="top">
							<ul>
								<li>
									<h4><i></i>食品生鲜</h4>
									<p>
										<a href="#">保健食品</a>
										<a href="#">进口水果</a>
										<a href="#">糖果巧克力</a>
										<a href="#">牛奶乳品</a>
										<a href="#">坚果炒货</a>
										<a href="#">蜜饯果干</a>
									</p>
								</li>
								<li>
									<h4><i></i>服装服饰</h4>
									<p>
										<a href="#">女装馆</a>
										<a href="#">T恤</a>
										<a href="#">中长款半身</a>
										<a href="#">夹克/风衣</a>
										<a href="#">男装馆</a>
										<a href="#">内衣馆</a>
										<a href="#">户外鞋服</a>
										<a href="#">鞋帽</a>
										<a href="#">箱包馆</a>
									</p>
								</li>
								<li>
									<h4><i></i>个护化妆</h4>
									<p>
										<a href="#">美容护肤</a>
										<a href="#">香水彩妆</a>
										<a href="#">面部护肤</a>
										<a href="#">洗发护发</a>
										<a href="#">身体护肤</a>
										<a href="#">口腔护理</a>
									</p>
								</li>
								<li>
									<h4><i></i>手机数码</h4>
									<p>
										<a href="#">网卡</a>
										<a href="#">热卖手机</a>
										<a href="#">手机配件</a>
										<a href="#">数码影音</a>
										<a href="#">智能设备</a>
										<a href="#">电脑</a>
									</p>
								</li>
								<li>
									<h4><i></i>家用电器</h4>
									<p>
										<a href="#">大家电</a>
										<a href="#">大家电</a>
										<a href="#">生活电器</a>
										<a href="#">厨房电器</a>
										<a href="#">个护健康</a>
										<a href="#">五金家装</a>
									</p>
								</li>
								<li>
									<h4><i></i>家居日用</h4>
									<p>
										<a href="#">家纺</a>
										<a href="#">家具</a>
										<a href="#">厨具</a>
										<a href="#">灯具</a>
										<a href="#">家装软饰</a>
										<a href="#">生活用品</a>
										<a href="#">办公用品</a>
									</p>
								</li>
								<li>
									<h4><i></i>酒类饮料</h4>
									<p>
										<a href="#">酒水</a>
										<a href="#">冲调饮品</a>
										<a href="#">饮料饮品</a>
										<a href="#">茗茶</a>
									</p>
								</li>
								<li>
									<h4><i></i>母婴用品</h4>
									<p>
										<a href="#">尿裤湿巾</a>
										<a href="#">玩具</a>
										<a href="#">婴儿尿裤</a>
										<a href="#">孕妇装</a>
										<a href="#">育婴奶粉</a>
										<a href="#">营养/辅食</a>
										<a href="#">孕婴洗浴</a>
										<a href="#">喂养用品</a>
										<a href="#">车床/床品</a>
										<a href="#">孕妈专区</a>
										<a href="#">童鞋童装</a>
									</p>
								</li>
							</ul>
						</div>
						<div class="down">
							<h3>销量排行榜</h3>
							<ul class="xL">
								<li class="lt o">
									<span>1</span>
									<dl class="l">
										<dt class="l"><img src="img/2708_thumb_G_1458596238415.jpg" /></dt>
										<dd class="l"><a href="#">康婷瑞倪维儿活肤营养水80ml</a><br /><span>97.0</span></dd>
									</dl>
								</li>
								<li class="l1 o1 o">
									<span>2</span>
									Huawei/华为 荣耀6 Plus高
								</li>
								<li class="l1 w1 w">
									<span>1</span>
									康婷瑞倪维儿活肤营养水80ml
								</li>
								<li class="lt w">
									<span>2</span>
									<dl class="l">
										<dt class="l"><img src="img/147_thumb_G_1452897883992.jpg" /></dt>
										<dd class="l"><a href="#">华为 荣耀6 Plus高配版</a><br /><span>1899.0</span></dd>
									</dl>
								</li>
							</ul>
						</div>
					</div>
					<div class="content_list_right r">
						<div class="paixu">
							<ul class="l">
								<li class="l">搜索结果</li>
								<li class="l f red">上架<i></i></li>
								<li class="l f">价格<i></i></li>
								<li class="l f">更新<i></i></li>
								<li class="l f">人气<i></i></li>
							</ul>
							<ul class="r">
								<li class="shuliang l">
									共20个商品
								</li>
								<li class="l ye">
									<p class="l"><span>1</span>/2</p>
									<span class="btn_pre"><</span>
									<span class="btn_next">></span>
								</li>
							</ul>
						</div>
						<div class="json_list">
						
						</div>
					</div>
				</div>
				<div class="content_qita">
					<div class="left">
						<p>最近浏览</p>
						<div class="auto">
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
							<dl>
								<dt></dt>
								<dd></dd>
							</dl>
						
						</div>
					</div>
					<div class="right">
						
					</div>
				</div>
			</div>
		</div>
		<script>
			$(function(){
				var listming = getCookie("listming");
				$("#content .now_list .now_list_zi").html(listming)
				
				//左侧菜单
				var _target = 1;
				$("#content .content_list .content_list_left .top h4").click(function(){
					$(this).next().toggle()
					if(_target == 1){
						$(this).find("i").css("backgroundPositionX","-17px")
					}else{
						$(this).find("i").css("backgroundPositionX","0")
					}
					_target = !_target
				})
				$("#content .content_list .content_list_left .down .xL .o1").mouseover(function(){
					$("#content .content_list .content_list_left .down .xL .o").hide()
					$("#content .content_list .content_list_left .down .xL .w").show()
				})
				$("#content .content_list .content_list_left .down .xL .w1").mouseover(function(){
					$("#content .content_list .content_list_left .down .xL .w").hide()
					$("#content .content_list .content_list_left .down .xL .o").show()
				})
			})	
				
				//右侧  排序
			$(function(){
				var _index = 0
				var $li_f = $("#content .content_list .content_list_right .paixu ul.l .f")
				console.log($li_f.length)
				$li_f.click(function(){
					_index = $(this).index()-1;
					$(this).addClass("red").css("color","#fff").siblings().removeClass("red").css("color","#666")	
				})
				$li_f.hover(function(){
					$(this).css("color","#E4393C")
					$li_f.eq(_index).css("color","#fff")
				},function(){
					$(this).css("color","#666")
					$li_f.eq(_index).css("color","#fff")
				})
				
				//json获取数据
				$.ajax({
					type:"get",
					url:"data/list.json",
					async:true,
					success:function(data){
						var mag = data.data;
						var listid = getCookie("listid")
						for(var i = 0; i < mag.length ; i++){
							if(mag[i].id == listid){
								var str = "";
								var magdata = mag[i].data1;
								for(var k = 0 ; k < magdata.length; k++){
									str += '<div class="json_w block'+k+'">'
									for(var j in magdata[k]){
										str += '<div class="json_div">'
										str += '<dl class="goods">'
										str += '<dt><a class="btn_de" dataid="'+magdata[k][j].id+'" href="details.html"><img src="'+magdata[k][j].img+'"/></a></dt>'
										
										str += '<dd>'
										str += '<a class="btn_de aa" dataid="'+magdata[k][j].id+'" href="details.html">'+magdata[k][j].name+'</a>'
										str += '<p><span class="price">'+magdata[k][j].price+'</span><span class="oldprice">'+magdata[k][j].oldprice+'</span></p>'
										str += '<ul><li style="border-right:1px solid #eee"><a class="btn_de" dataid="'+magdata[k][j].id+'" href="details.html" style="color:#3388c1">'+magdata[k][j].num+'</a><p>商品销量</p></li><li style="border-right:1px solid #eee"><a class="btn_de" dataid="'+magdata[k][j].id+'" href="details.html" style="color:#b57c5b">'+magdata[k][j].lun+'</a><p>用户评论</p></li><li><a class="btn_de" dataid="'+magdata[k][j].id+'" href="details.html" style="color:#b57c5b">'+magdata[k][j].qi+'</a><p>关注人气</p></li></ul>'
										str += '<div><a class="duibi" href="javascript:;">对比</a><a class="like" href="javascript:;">喜欢</a></div>'
										str += '<a class="btn_gwc" dataid="'+magdata[k][j].id+'" href="javascript:;">加入购物车</a>'
										str += '</dd>'
										str += '</dl>'
										str += '</div>'
									}
									str += '</div>'
								}
								$(".json_list").append(str);
							}
						}
					}
				});
				$(".json_list").on("click",".btn_de",function(){
					var dataid = $(this).attr("dataid")
					setCookie("dataid",dataid)
				})
				$(".json_list").on("click",".btn_gwc",function(){
					if(getCookie("login")){
						var dataid = $(this).attr("dataid");
						if(getCookie("num"+dataid)){
							var oldnum = getCookie("num"+dataid);
							var newnum = Number(oldnum) + 1;
							setCookie("num"+dataid,newnum);
						}else{
							setCookie(dataid,dataid);
							setCookie("num"+dataid,1)
						}
						var pica= $(this).parent().prev().find("img")
						var L=pica.offset().left
						var T=pica.offset().top
						var endL=$(".winr_gwc_r .p1").offset().left
						var endT=$(".winr_gwc_r .p1").offset().top
						$("body").append(pica.clone().css({"position":"absolute","left":L,"top":T,"width":"150px","height":"150px","z-index":"99999","border-radius":"50%"}).animate({"width":"10px","height":"10px","left":endL,"top":endT,"opacity":"0.2"},800,function(){
							$(this).remove()
						}))
					winr_gwc()
					}else{
						window.location.href = "login.html"
					}
				})
				
			})
		</script>
		<div id="footer">
			<div class="bottom">
				<div class="bottom-footer">
					
				</div>
				<div class="bottom-bottom">
					
				</div>
			</div>
		</div>
		<script>
			$("#footer .bottom-bottom").load("bottom-bottom.html")
			$("#footer .bottom-footer").load("bottom-footer.html")	
		</script>
		
	</body>
</html>
